<script lang="ts" setup>

import {data} from "../js/Data.ts";
import {Planet} from "../js/Planet";
import {player} from "../js/Player";
import {computed} from "vue";
import {
  coldPlanetTypeData,
  gasPlanetTypeData,
  hotPlanetTypeData,
  planetTypeIdNameMap,
  warmPlanetTypeData
} from "../js/PlanetType.ts";
import {oceanMap} from "../js/Ocean.ts";
import {Resource, resourceMap} from "../js/Resource.ts";
import {Util} from "../js/Util.ts";

let planetData: Array<Planet> = data.planetData
let planetResourceData = data.planetResourceData

let planetResourceMap = new Map<number, Set<Resource>>()
for (let p of planetData) {
  planetResourceMap.set(p.id, new Set<Resource>())
}

for (let pr of planetResourceData) {
  planetResourceMap.get(pr.planetId)?.add(resourceMap.get(pr.itemId) ?? new Resource());
}

let filter = computed(() => {
  let temp: Array<Planet> = [...planetData]
  if (data.filter.onlyCurrentStar) {
    temp = temp.filter((p) => {
      return p.starId == data.current.star.id
    })
  }

  if (data.filter.oceanTypeId != 0) {
    temp = temp.filter((p) => {
      return p.oceanId == data.filter.oceanTypeId
    })
  }

  if (data.filter.planetType == '热带') {
    temp = temp.filter((p) => {
      return p.planetTypeId == data.filter.hotPlanetTypeId
    })
  }

  if (data.filter.planetType == '温带') {
    temp = temp.filter((p) => {
      return p.planetTypeId == data.filter.warmPlanetTypeId
    })
  }

  if (data.filter.planetType == '寒带') {
    temp = temp.filter((p) => {
      return p.planetTypeId == data.filter.coldPlanetTypeId
    })
  }

  if (data.filter.planetType == '巨行星') {
    temp = temp.filter((p) => {
      return p.planetTypeId == data.filter.gasPlanetTypeId
    })
  }
  return data.filter.limitShow > 0 ? temp.slice(0, data.filter.limitShow) : temp
})


let forward = (p: Planet) => {
  data.target.planet = p
  if (data.current.star.id == data.target.star.id) {
    // 星系内
    let distance = Math.abs(data.current.planet.distance - data.target.planet.distance)

    data.moveLeftTime = ~~(distance / player.spaceSpeed) + 10
  } else {
    // 星系外
    let distance = data.current.planet.distance +
        Math.sqrt(
            Math.pow(data.current.star.x - data.target.star.x, 2) +
            Math.pow(data.current.star.y - data.target.star.y, 2) +
            Math.pow(data.current.star.z - data.target.star.z, 2)
        ) * data.config.AuToM * data.config.lyToAu + data.target.planet.distance
    data.moveLeftTime = ~~(distance / player.jumpSpeed) + 10
  }
}

let backward = () => {
  if (data.current.star.id == data.target.star.id) {
    // 星系内
    let distance = Math.abs(data.current.planet.distance - data.target.planet.distance)

    data.moveLeftTime = ~~(distance / player.spaceSpeed) + 10 - data.moveLeftTime
  } else {
    // 星系外
    let distance = data.current.planet.distance +
        Math.sqrt(
            Math.pow(data.current.star.x - data.target.star.x, 2) +
            Math.pow(data.current.star.y - data.target.star.y, 2) +
            Math.pow(data.current.star.z - data.target.star.z, 2)
        ) * data.config.AuToM * data.config.lyToAu + data.target.planet.distance
    data.moveLeftTime = ~~(distance / player.jumpSpeed) + 10 - data.moveLeftTime
  }
  data.target.planet = data.current.planet
}
</script>

<template>
  <n-space align="start" vertical>
    <n-button-group>
      <n-button :type="!data.filter.onlyCurrentStar ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.onlyCurrentStar = false">
        全部
      </n-button>
      <n-button :type="data.filter.onlyCurrentStar ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.onlyCurrentStar = true">
        当前星系
      </n-button>
    </n-button-group>
    <n-button-group>
      <n-button :type="0 == data.filter.limitShow ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.limitShow = 0">
        全部
      </n-button>
      <n-button :type="10 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 10">
        10
      </n-button>
      <n-button :type="20 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 20">
        20
      </n-button>
      <n-button :type="50 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 50">
        50
      </n-button>
      <n-button :type="100 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 100">
        100
      </n-button>
    </n-button-group>
    <n-button-group>
      <n-button :type="0 == data.filter.oceanTypeId ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.oceanTypeId = 0">
        全部
      </n-button>
      <n-button v-for="o in data.oceanData" :type="o.id == data.filter.oceanTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.oceanTypeId = o.id">
        {{ o.name }}
      </n-button>
    </n-button-group>
    <n-button-group>
      <n-button :type="'' == data.filter.planetType ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.planetType = ''">
        全部
      </n-button>
      <n-button :type="'热带' == data.filter.planetType ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.planetType = '热带'">
        热带
      </n-button>
      <n-button :type="'温带' == data.filter.planetType ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.planetType = '温带'">
        温带
      </n-button>
      <n-button :type="'寒带' == data.filter.planetType ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.planetType = '寒带'">
        寒带
      </n-button>
      <n-button :type="'巨行星' == data.filter.planetType ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.planetType = '巨行星'">
        巨行星
      </n-button>
    </n-button-group>
    <n-button-group v-if="'热带' == data.filter.planetType">
      <n-button v-for="pt in hotPlanetTypeData" :type="pt.id == data.filter.hotPlanetTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.hotPlanetTypeId = pt.id">
        {{ pt.name }}
      </n-button>
    </n-button-group>
    <n-button-group v-if="'温带' == data.filter.planetType">
      <n-button v-for="pt in warmPlanetTypeData" :type="pt.id == data.filter.warmPlanetTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.warmPlanetTypeId = pt.id">
        {{ pt.name }}
      </n-button>
    </n-button-group>
    <n-button-group v-if="'寒带' == data.filter.planetType">
      <n-button v-for="pt in coldPlanetTypeData" :type="pt.id == data.filter.coldPlanetTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.coldPlanetTypeId = pt.id">
        {{ pt.name }}
      </n-button>
    </n-button-group>
    <n-button-group v-if="'巨行星' == data.filter.planetType">
      <n-button v-for="pt in gasPlanetTypeData" :type="pt.id == data.filter.gasPlanetTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.gasPlanetTypeId = pt.id">
        {{ pt.name }}
      </n-button>
    </n-button-group>
  </n-space>
  <n-table :bordered="false" style="margin-top: 10px">
    <thead>
    <tr>
      <th>名称</th>
      <th>类型</th>
      <th>恒星距离</th>
      <th>电力</th>
      <th>风力</th>
      <th>太阳能</th>
      <th>适建区域</th>
      <th>海洋</th>
      <th>资源</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="p in filter">
      <td>{{ p.name }}</td>
      <td>{{ planetTypeIdNameMap.get(p.planetTypeId) }}</td>
      <td>{{ p.distance }}</td>
      <td>{{ p.energyRemain }}</td>
      <td>{{ p.wind }}</td>
      <td>{{ p.luminosity }}</td>
      <td>{{ Math.floor(p.landPercent * p.area - p.areaUsed) }} / {{ Math.floor(p.landPercent * p.area) }}</td>
      <td>{{ oceanMap.get(p.oceanId)?.name }}</td>
      <td>
        <n-image-group>
          <n-space>
            <n-image
                v-for="r in planetResourceMap.get(p.id)"
                :src=Util.srcHandler(r)
                width="32"
            />
          </n-space>
        </n-image-group>
      </td>
      <td>
        <n-button
            v-if="data.moveLeftTime == 0 && player.spaceSpeed > 0 && p.id != data.current.planet.id"
            type="success"
            @click="forward(p)"
        >
          前往
        </n-button>
        <n-button
            v-if="data.moveLeftTime > 0 && p.id != data.current.planet.id"
            disabled
            type="default"
        >
          剩余{{ data.moveLeftTime }}秒
        </n-button>
        <n-button
            v-if="data.moveLeftTime > 0 && p.id == data.current.planet.id && data.target.planet.id != data.current.planet.id"
            type="warning"
            @click="backward()"
        >
          掉头
        </n-button>
      </td>
    </tr>
    </tbody>
  </n-table>
</template>

<style scoped>

</style>